<template>
  <div class="popular-playlists">
    <MusicNav/>
    <!--热门榜单盒子-->
    <div class="popular-playlists-container">
      <div class="playlist-card" v-for="(item, index) in playlists" :key="index">
        <div class="image-wrapper">
          <img :src="item.imageUrl" :alt="item.title">
          <div class="play-icon">
            <i class="fas fa-play-circle"></i>
          </div>
        </div>
        <div class="playlist-info">
          <h3 class="title">{{ item.title }}</h3>
          <p class="author">{{ item.author }}</p>
          <span class="play">播放量：{{ formatPlayCount(item.playCount) }}</span>
        </div>
      </div>
    </div>
    <FooterNotice/>
  </div>
</template>

<script setup>
import MusicNav from '@/components/music-nav.vue';
import FooterNotice from '@/components/footer-notice.vue';
import { ref } from 'vue';

// 模拟数据
const playlists = ref([
  {
    id: 1,
    imageUrl: 'https://qpic.y.qq.com/music_cover/MpXqEDqlicHJc4NMOhibdmQEia8QiccyXO7UsGqKiaLz5yvz4LECwJjdejA/300',
    title: '那些散落在风中的离别心事',
    author: '再次重逢的世界',
    playCount: 60000
  },
  {
    id: 2,
    imageUrl: 'https://qpic.y.qq.com/music_cover/Dtia0XKYArTPUgIHg2kSb8Vl17ufaj7XkywkaTtQ6BVrExzZ4UykqjQ/300',
    title: '车载蓝牙已连接，正在随机播放',
    author: '音乐流了算',
    playCount: 100000
  },
  {
    id: 3,
    imageUrl: 'https://qpic.y.qq.com/music_cover/fPn0iapLleUFx4kZhMPupPnWdFwsC7fEKa8pgw5c0TjBno6b13LGEww/300',
    title: '夜店DJ，在舞池里释放个性',
    author: '穿着皮鞋跳大神',
    playCount: 12146000
  },
  {
    id: 4,
    imageUrl: 'https://qpic.y.qq.com/music_cover/Dtia0XKYArTPUgIHg2kSb8Vl17ufaj7XkywkaTtQ6BVrExzZ4UykqjQ/300',
    title: '抖音最火：听说你也在找这些歌',
    author: '好想见泰勒',
    playCount: 17490000
  },
  {
    id: 5,
    imageUrl: 'https://qpic.y.qq.com/music_cover/6YMeRGTD3l0bKibyic24wzJv1Bv3sMgECdS6WTYFXXYqFgrZiaiaMBJynA/300',
    title: '心情随身听，不可抗拒的好歌',
    author: '朝朝吃什么',
    playCount: 100000
  },
  // ... 添加更多数据
]);

// 格式化播放量
const formatPlayCount = (count) => {
  if (count < 10000) {
    return count;
  }
  return (count / 10000).toFixed(1) + '万';
};
</script>

<style scoped>
.popular-playlists {
  width: 100%;
  padding: 20px;
}

.popular-playlists-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin: 20px auto;
  max-width: 1200px;
}

.playlist-card {
  width: calc(20% - 16px);
  min-width: 200px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.playlist-card:hover {
  transform: translateY(-5px);
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 aspect ratio */
  overflow: hidden;
  border-radius: 8px;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.playlist-card:hover .image-wrapper img {
  transform: scale(1.1);
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-icon i {
  font-size: 20px;
  color: #333;
}

.playlist-card:hover .play-icon {
  opacity: 1;
}

.playlist-info {
  padding: 8px 0;
}

.title {
  color: #333;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.author {
  font-size: 14px;
  color: #666;
  margin: 4px 0 4px 0;
  transition: color 0.3s ease;
  cursor: pointer;
}

.author:hover {
  color: #1890ff;
}

.play {
  font-size: 14px;
  color: #666;
}
</style>

